import React from 'react'
import { GoodsCounter } from '../GoodsCounter/GoodsCounter'
import classes from './Goods.module.css'

export const Goods = (props) => {
    
  return (
    <div className={classes.goodsContainer}>
        <div className={classes.imgBox}>
            <img className={classes.goodsImage} src={props.goodsData.goodsImg}></img>
        </div>
        <div className={classes.contentContainer}>
            <p className={classes.goodsName}>{props.goodsData.goodsName}</p>
            <p className={classes.goodsDesc}>{props.goodsData.goodsDesc}</p>
            <div className={classes.bottomContainer}>
                <p className={classes.goodsPrice}>{props.goodsData.goodsPrice}</p>
                <GoodsCounter goodsData={props.goodsData}/>
            </div>
        </div>
        
    </div>
  )
}
